<template>
  <div>
    <div>
      <SideBar />
      <HeaderNav />
      <div class="app-main">
        <div class="search-list" style="display: flex">
          <div style="margin-left: 30px; margin-top: 20px">
            <p style="color: #ccc">仓库编号</p>
            <input type="text" placeholder="请输入" class="search-input" />
          </div>
          <div style="margin-left: 30px; margin-top: 20px">
            <p style="color: #ccc">仓库编号</p>
            <input type="text" placeholder="请输入" class="search-input" />
          </div>
          <div style="margin-left: 30px; margin-top: 20px">
            <p style="color: #ccc">仓库编号</p>
            <input type="text" placeholder="请输入" class="search-input" />
          </div>
          <div style="margin-left: 90px; margin-top: 60px">
            <button class="search-btn" style="background-color: #ffb200">
              搜索
            </button>
            <button class="search-btn" style="margin-left: 30px">重置</button>
          </div>
        </div>
        <div class="newwarehouse">
          <div><button class="newwarehouse-btn">新增仓库</button></div>
          <div style="margin-top: 30px">
            <template>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="date" label="序号" width="150">
                </el-table-column>
                <el-table-column prop="name" label="仓库编码" width="120">
                </el-table-column>
                <el-table-column prop="province" label="仓库名称" width="120">
                </el-table-column>
                <el-table-column prop="city" label="仓库类型" width="120">
                </el-table-column>
                <el-table-column prop="address" label="省/市/区" width="300">
                </el-table-column>
                <el-table-column prop="zip" label="详细地址" width="120">
                </el-table-column>
                 <el-table-column prop="zip" label="仓库状态" width="120">
                </el-table-column>
                 <el-table-column prop="zip" label="仓库面积" width="120">
                </el-table-column>
                 <el-table-column prop="zip" label="库区数量" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="负责人" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="联系电话" width="120">
                </el-table-column>
                <el-table-column prop="zip" label="更新时间" width="120">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >编辑</el-button
                    >
                    <el-button type="text" size="small">停用</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <div style="margin-left: 300px; margin-top: 20px">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SideBar from '@/components/SideBar.vue'
import HeaderNav from '@/components/HeaderNav.vue'
export default {
  name: 'StoresControl',
  components: {
    SideBar,
    HeaderNav
  },
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style>
.app-main {
  margin-left: 260px;
  /* background-color: skyblue; */
}
.search-list {
  margin-right: 30px;
  height: 130px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.search-input {
  width: 220px;
  height: 30px;
  outline: none;
}
.search-btn {
  width: 90px;
  height: 36px;
  border: 0;
  border-radius: 30px;
}
.search-btn:hover {
  background-color: #ffb200;
}
.newwarehouse {
  margin-top: 20px;
  margin-right: 30px;
  height: 600px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.newwarehouse-btn {
  margin-top: 25px;
  margin-left: 30px;
  width: 120px;
  height: 45px;
  border: 0;
  border-radius: 20px;
  background-color: #00be76;
}
</style>
